<script setup>
import { useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'
import { CircleClose, Promotion, User, Lock } from '@element-plus/icons-vue'
import { useInfoStore } from '@/stores/user'
const infoStore = useInfoStore()
const router = useRouter()



const rules = ref({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ],
})
const form = ref({
  username: '',
  password: '',
})
const loginFormRef = ref(null)
const onSubmit = () => {
  loginFormRef.value.validate(async (valid) => {
    if (valid) {
      infoStore.userLogin(form.value)
    } else {
      return false
    }
  })

}
const resetForm = () => {
  console.log('resetForm')
  loginFormRef.value.resetFields()
}



// 主题切换
const value1 = ref(true)
const theme = ref(localStorage.getItem("theme") || '')
const onChangeSwitch = (flag) => {
  theme.value = theme.value === "theme-light" ? "theme-dark" : "theme-light"
  localStorage.setItem("theme", theme.value)
}

</script>

<template>

  <div :class="theme">
    <div class="opcity"></div>
    <el-switch class="switch" v-model="value1" @change="onChangeSwitch" />
    <div class="comment">
      <div class="picture"><img src="@/assets/image/login_left.png" alt=""></div>
      <div class="form">
        <div class="header">
          <div class="login-pic"><img src="@/assets/image/login.svg" alt=""></div>
          <div class="title">Geeler-Admin</div>
        </div>
        <div class="login-form">
          <div class="box-input">
            <el-form :model="form" label-width="auto" ref="loginFormRef" :rules="rules">
              <el-form-item label-width="auto" prop="username">
                <el-input v-model="form.username" placeholder="用户名:admin/user">
                  <template #prefix>
                    <el-icon class="el-input__icon">
                      <User />
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item label-width="auto" prop="password">
                <el-input v-model="form.password" show-password type="password" placeholder="密码:123456">
                  <template #prefix>
                    <el-icon class="el-input__icon">
                      <Lock />
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="boxbutton">
            <el-button @click="resetForm" type="info" style="width: 40%;" :icon="CircleClose" round>重置</el-button>
            <el-button type="primary" @click="onSubmit" style="width: 40%;" :icon="Promotion" round>登录</el-button>
          </div>


        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import './index.scss'
</style>